<!DOCTYPE html>
<html lang="en">

<head>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" class="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="./css/index.css">
    <title>mp4</title>
    <script>
      (function (window, document) {
        var setRem = function () {
          var innerWidth = document.documentElement.getBoundingClientRect().width || window.innerWidth;
          if (innerWidth > 768) {
            document.documentElement.style.fontSize = 48 + 'px';
          } else {
            document.documentElement.style.fontSize = innerWidth / 15 + 'px';
          }
        };
        window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', setRem, false);
        setRem();
      })(window, document);
    </script>
  </head>

<body>
  <div class="audio-box">
    <div class="aud">
      <video src="./media/1.mp4" autoplay id="audio"></video>
    </div>
    <div class="aud1">
      <video src="./media/2.mp4" autoplay id="audio1" loop></video>
      <div class="msg">
        <input type="text" placeholder="请输入登录ID">
        <input type="text" placeholder="密码">
        <div class="login">登录</div>
        <div class="card">
          <img src="./images/user.png" alt="">
          <p>卡登录</p>
        </div>
        <p class="text">创建账号</p>
        <p class="text">忘记密码</p>
        <p class="text">忘记登录密码</p>
      </div>
    </div>
  </div>
</body>
<script src="./js/zepto.min.js"></script>
<script src="./js/TweenMax.min.js"></script>
<script src="./js/index.js"></script>

</html>